<template>
  <div>
    <div class=" my-card">
          <div class="my-card-header">
            <div class="flex items-center justify-between">
              <span>
                <span class="my-card-title">{{ $t('operator.account_info') }}</span>
              </span>
              <el-button
                v-if="isAuth('10680202.MANAGE')"
                type="primary"
                class="w-8"
                @click="openRemarkPopup"
              >
            <svg-icon icon-class="outlined-edit"/>
            </el-button>
            </div>
          </div>
          <div  class="my-card-body">
            <div v-if=" operator && operator.status !== 1" class="seal">
              <div class="subseal">
                {{getStatus(operator.status)}}
              </div>
            </div>
            <el-descriptions v-if=" operator" :colon="true" style="padding: 16px;" :column="1">
              <el-descriptions-item v-if=" operator.status ===1" :label="$t('operator.oid')" >{{ operator.oid }}</el-descriptions-item>
              <el-descriptions-item :label="$t('operator.operatorNo')">{{ operator.operatorNo }}</el-descriptions-item>
              <el-descriptions-item :label="$t('operator.operatorId')">{{ operator.operatorId }}</el-descriptions-item>
            </el-descriptions>
    <hr>
            <el-descriptions v-if=" operator" style="padding: 16px 16px 0 16px;" :colon="true" :column="2">
              <el-descriptions-item :label="$t('operator.name')">{{ operator.name }}</el-descriptions-item>
              <el-descriptions-item :label="$t('operator.mobile')">{{ operator.mobile }}</el-descriptions-item>
              <el-descriptions-item :label="$t('operator.linkman')" >{{ operator.linkman }}</el-descriptions-item>
              <el-descriptions-item :label="$t('operator.shortName')">{{ operator.shortName }}</el-descriptions-item>
              <el-descriptions-item :label="$t('operator.email')" >{{ operator.email }}</el-descriptions-item>
              <el-descriptions-item :label="$t('operator.billing_status')" >{{ formatBillingStatus(ancillaryInfo !== null ? ancillaryInfo.billingStatus : null) }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions style='padding-left: 16px' :column="1">
              <el-descriptions-item :label="$t('operator.remark')">{{ ancillaryInfo === null ? '' : ancillaryInfo.adminRemark }}</el-descriptions-item>-->
            </el-descriptions>
    <hr>

    <el-descriptions :colon="true" style="padding: 16px;" :column="2">
      <el-descriptions-item :label="$t('operator.country')">{{ operator === null ? '' : $t('country_or_region.' + operator.countryCode) }}</el-descriptions-item>
      <el-descriptions-item :label="$t('operator.region')">{{ ancillaryInfo === null ? '' : formatRegion(ancillaryInfo) }}</el-descriptions-item>
      <el-descriptions-item :label="$t('operator.provName')">{{ operator === null ? '' : operator.provName }}</el-descriptions-item>
      <el-descriptions-item :label="$t('operator.cityName')" >{{ operator === null ? '' : operator.cityName }}</el-descriptions-item>
      <el-descriptions-item :label="$t('common.time_zone')" >{{ operator === null ? '' : operator.utcTime }}</el-descriptions-item>
      <el-descriptions-item :label="$t('developer.address')" >{{ operator === null ? '' : operator.address }}</el-descriptions-item>

    </el-descriptions>
          </div>
        </div>

    <resetpw-operator ref="resetpw" />
      <el-dialog
        v-model="editPopupVisible"
        :title="$t('common.set')"
        width="800px"
        @close="handleCloseRemark">
        <el-form ref="formData" :model="formData" :rules='rules' label-width="200px">
          <el-form-item :label="$t('operator.name')" prop='operatorName'>
            <el-input v-model="formData.operatorName" maxlength="128" @blur="() => (formData.operatorName = formData.operatorName.trim())" clearable show-word-limit/>
          </el-form-item>
          <el-form-item :label="$t('operator.shortName')">
            <el-input v-model="formData.operatorShortName" maxlength="128" @blur="() => (formData.operatorShortName = formData.operatorShortName.trim())" clearable show-word-limit/>
          </el-form-item>
          <el-form-item :label="$t('operator.billing_status')" >
            <el-radio v-model="formData.billingStatus" label='0'>{{ $t('operator.unbilled') }}</el-radio>
            <el-radio v-model="formData.billingStatus" label='1'>{{ $t('operator.billed') }}</el-radio>
          </el-form-item>
          <el-form-item :label="$t('operator.linkman')">
            <el-input v-model="formData.linkMan" maxlength="64" @blur="() => (formData.linkMan = formData.linkMan.trim())" clearable show-word-limit/>
          </el-form-item>
          <el-form-item :label="$t('operator.email')" prop='email'>
            <el-input v-model="formData.email" maxlength="128" @blur="() => (formData.email = formData.email.trim())" clearable show-word-limit/>
          </el-form-item>
          <el-form-item :label="$t('operator.mobile')" prop='phoneNum'>
            <el-input v-model="formData.phoneNum" maxlength="32" @blur="() => (formData.phoneNum = formData.phoneNum.trim())" clearable show-word-limit/>
          </el-form-item>
          <el-form-item :label="$t('operator.region')">
            <el-select
              v-model="formData.operatorAreaCode"
              clearable
              :placeholder="$t('operator.region')"
              style="width: 100%"
            >
              <el-option
                v-for="areaCode in regionsList"
                :key="areaCode.regionCode"
                :value="areaCode.regionCode"
                :label="areaCode.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('common.time_zone')">
            <el-select
              v-model="formData.utcTime"
              clearable
              :placeholder="$t('common.time_zone')"
              style="width: 100%"
            >
              <el-option
                v-for="timezone in timezoneList"
                :key="timezone.timezoneId"
                :value="timezone.utcTime"
                :label="timezone.utcTime"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operator.country')" prop="countryCode">
            <el-select
              v-model="formData.countryCode"
              filterable
              :placeholder="$t('operator.country')"
              style="width: 100%"
            >
              <el-option
                v-for="item in countryData"
                :key="item.countryCode3"
                :label="$t('country_or_region.' + item.countryCode3)"
                :value="item.countryCode3"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operator.provName')">
            <el-input v-model="formData.provName" rows="2" maxlength="32" @blur="() => (formData.provName = formData.provName.trim())" show-word-limit></el-input>
          </el-form-item>
          <el-form-item :label="$t('operator.cityName')">
            <el-input v-model="formData.cityName" rows="2" maxlength="64" @blur="() => (formData.cityName = formData.cityName.trim())" show-word-limit></el-input>
          </el-form-item>
          <el-form-item :label="$t('developer.address')">
            <el-input type="textarea" v-model="formData.address" rows="2" maxlength="128" @blur="() => (formData.address = formData.address.trim())" show-word-limit></el-input>
          </el-form-item>
          <el-form-item :label="$t('operator.remark')">
            <el-input type="textarea" v-model="formData.adminRemark" rows="4" clearable maxlength='512' @blur="() => (formData.adminRemark = formData.adminRemark.trim())" show-word-limit></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="editPopupVisible = false">{{ $t('common.cancel') }}</el-button>
          <el-button
            type="primary"
            :loading="confirmLoading"
            @click="submit"
          >{{ $t('common.confirm') }}</el-button>
        </template>
      </el-dialog>

  </div>
</template>

<script>
import { formatCountry } from '@/utils/formatCountry'
import resetpwOperator from './account/resetpw-operator.vue'
import { getAncillary, getOperatorInfo, getRegions, postAncillary, getTimezones } from '@/api/operator'
import countryJson from '@/assets/static/country.json'
import { checkPhoneNum } from '@/utils/validate'
import { isAuth } from "@/utils";

export default {
  components: { resetpwOperator },
  data() {
    return {
      operator: null,
      ancillaryInfo: null,
      editPopupVisible: false,
      confirmLoading: false,
      countryData: countryJson,
      formData: {
        phoneNum: '',
        linkMan: '',
        operatorName: '',
        operatorShortName: '',
        email: '',
        countryCode: '',
        provName: '',
        cityName: '',
        address: '',
        adminRemark: '',
        billingStatus: null,
        operatorAreaCode: '',
        utcTime: ''
      },
      adminRemark: '',
      billingStatus: null,
      operatorAreaCode: '',
      regionsList: [],
      timezoneList: [],
      rules: {
        operatorName: [
          {
            required: true,
            message: this.$t('common.nullInputTip'),
            trigger: 'blur'
          }
        ],
        phoneNum: [
          {
            validator: checkPhoneNum,
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: this.$t('common.rule_input'),
            trigger: 'blur'
          },
          {
            type: 'email',
            message: this.$t('user.email_format_error'),
            trigger: 'blur'
          }
        ],
        countryCode: [
          {
            required: true,
            message: this.$t('common.nullInputTip'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    isAuth,
    getStatus(status) {
      if (status === 0) {
        return this.$t('operator.locked')
      } else
      if (status === 2) {
        return this.$t('operator.pendingReview')
      } else if (status === 3) {
        return this.$t('operator.reject')
      }
    },
    handleAdminRemark(adminRemark) {
      console.log('adminRemark', adminRemark)
      if (adminRemark !== null && adminRemark !== undefined && adminRemark !== '') {
        this.formData.adminRemark = adminRemark.trim()
        this.adminRemark = adminRemark.trim()
      } else {
        this.formData.adminRemark = ''
        this.adminRemark = ''
      }
    },
    init(operator) {
      this.operator = operator
      // this.formData = {}
      this.formData.phoneNum = operator.mobile
      this.formData.linkMan = operator.linkman
      this.formData.operatorName = operator.name
      this.formData.operatorShortName = operator.shortName
      this.formData.email = operator.email
      this.formData.countryCode = operator.countryCode
      this.formData.provName = operator.provName
      this.formData.cityName = operator.cityName
      this.formData.address = operator.address
      this.formData.utcTime = operator.utcTime || ''
      this.getAncillary()
      this.regionsList = []
      getRegions().then((res) => {
        var i18nLocale = this.$i18n.locale
        this.regionsList = res
        this.initRegionsList(i18nLocale)
      })
      getTimezones().then((res) => {
        this.timezoneList = res
      })
    },
    initRegionsList(i18nLocale) {
      if (this.regionsList !== null && this.regionsList.length > 0) {
        this.regionsList.map(regions => {
          if (i18nLocale === 'en-US') {
            regions.label = regions.regionNameEn
          } else if (i18nLocale === 'zh-CN') {
            regions.label = regions.regionNameZh
          } else if (i18nLocale === 'pt-BR') {
            regions.label = regions.regionNamePt
          } else if (i18nLocale === 'ja-JP') {
            regions.label = regions.regionNameJp
          } else {
            regions.label = regions.regionNameEn
          }
        })
      }
    },
    formatCountry(value) {
      return formatCountry(value)
    },
    formatRegion(value) {
      var i18nLocale = this.$i18n.locale
      if (value.operatorAreaCode !== null && value.operatorAreaCode !== undefined && value.operatorAreaCode !== '') {
        if (i18nLocale === 'en-US') {
          return value.region.regionNameEn
        } else if (i18nLocale === 'zh-CN') {
          return value.region.regionNameZh
        } else if (i18nLocale === 'pt-BR') {
          return value.region.regionNamePt
        } else if (i18nLocale === 'ja-JP') {
          return value.region.regionNameJp
        } else {
          return value.region.regionNameEn
        }
      }
    },
    formatBillingStatus(billingStatus) {
      if (billingStatus !== null && billingStatus !== undefined) {
        if (billingStatus === 1) {
          return this.$t('operator.billed')
        } else if (billingStatus === 0) {
          return this.$t('operator.unbilled')
        }
        return ''
      }
      return ''
    },
    openRemarkPopup() {
      // 点击编辑图标时触发，打开编辑弹出窗口
      this.formData.adminRemark = this.ancillaryInfo.adminRemark
      this.formData.billingStatus = this.ancillaryInfo.billingStatus !== null ? this.ancillaryInfo.billingStatus.toString() : null
      this.formData.operatorAreaCode = this.ancillaryInfo.operatorAreaCode
      this.formData.phoneNum = this.operator.mobile
      this.formData.linkMan = this.operator.linkman
      this.formData.operatorName = this.operator.name
      this.formData.operatorShortName = this.operator.shortName
      this.formData.email = this.operator.email
      this.formData.countryCode = this.operator.countryCode
      this.formData.provName = this.operator.provName
      this.formData.cityName = this.operator.cityName
      this.formData.address = this.operator.address
      this.editPopupVisible = true
      this.$refs.formData.clearValidate()
      this.$refs.formData.resetFields()
    },
    handleCloseRemark() {
      this.editPopupVisible = false
      this.$refs.formData.clearValidate()
      this.$refs.formData.resetFields()
    },
    submit() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          console.log(this.formData)
          this.formData.operatorId = this.operator.operatorId
          this.formData.platCode = 'PASS'
          postAncillary(this.formData).then((res) => {
            // TODO 发送请求
            // this.getAncillary()
            this.getOperator()
            this.editPopupVisible = false
            this.$message.success(this.$t('common.message.operation_success'))
          }).catch((err) => {
            this.$confirmError(err)
          })
        }
      })
    },
    getAncillary() {
      getAncillary({ platCode: 'PASS', operatorId: this.operator.operatorId }).then((res) => {
        this.ancillaryInfo = res
        this.formData.billingStatus = res.billingStatus
        this.formData.adminRemark = res.adminRemark
        this.formData.operatorAreaCode = res.operatorAreaCode
      }).catch((err) => {
        this.$confirmError(err)
      })
    },
    getOperator() {
      getOperatorInfo(this.operator.operatorId).then((res) => {
        this.init(res)
        this.$emit('update-name', res.name)
      }).catch((err) => {
        this.$confirmError(err)
      })
    }
  },
  watch: {
    '$i18n.locale': function(newLocale, oldLocale) {
      console.log('语言已变为：', newLocale)
      // 在这里执行你想要的操作，比如刷新页面或重新加载数据等
      this.initRegionsList(newLocale)
    }
  }
}
</script>

<style lang="scss" scoped>

.el-form-item {
  margin-bottom: 15px;
  width: 80%;
}
.my-card {
background: #FFFFFF;
border: 1px solid #EEF0F7;
box-shadow: 0px 0px 21px 0px rgba(19,33,68,0.08);
border-radius: 12px;
margin: 0 36px;
.my-card-header {
  padding: 32px 24px;
  border-bottom: solid 1px #EEF0F7;
  .my-card-title {
    color: #1E2022;
    font-size: 16px;
    font-weight: 600;

  }
}

.my-card-body {
  padding: 36px;
  padding-left: 100px ;
  padding-right: 100px ;
  position: relative;
  ::v-deep .el-descriptions-item__label.has-colon {
    flex: none;
  }
}

}
.seal {

height: 100px;
top: -24px;
right: 70px;
border: solid 6px #f56c6c;
border-radius: 16px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(-15deg);
.subseal {
  height: 80px;
  margin: 4px;
  padding: 12px;
  border: solid 2px #f56c6c;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 900;
  color: #f56c6c;
}
}

::v-deep .el-descriptions__body {
    color: #677796;
}
</style>
